<template>
  <div class="cases-container">
    <h2 class="section-title">成功案例</h2>
    <el-carousel :interval="5000" height="400px">
      <el-carousel-item v-for="(item, index) in cases" :key="index">
        <div class="case-item">
          <el-image :src="item.image" class="case-image" />
          <div class="case-info">
            <h3>{{ item.title }}</h3>
            <p class="case-type">{{ item.type }}</p>
            <p class="case-desc">{{ item.description }}</p>
            <div class="case-stats">
              <span><el-icon><View /></el-icon> {{ item.views }}万播放</span>
              <span><el-icon><Star /></el-icon> {{ item.awards }}个奖项</span>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { View, Star } from '@element-plus/icons-vue'

const cases = [
  {
    title: '《城市之光》形象宣传片',
    type: '城市宣传片',
    image: 'https://via.placeholder.com/800x400',
    description: '为某省会城市打造的城市形象宣传片，融合历史与现代元素，全网播放量突破5000万',
    views: 5200,
    awards: 3
  },
  {
    title: '《味觉记忆》品牌纪录片',
    type: '品牌定制片',
    image: 'https://via.placeholder.com/800x400',
    description: '为老字号餐饮品牌打造的系列纪录片，成功带动品牌年轻化转型',
    views: 1800,
    awards: 2
  },
  {
    title: '《非遗·新生》文化短片',
    type: '文化传承片',
    image: 'https://via.placeholder.com/800x400',
    description: '展现传统手工艺与现代设计的碰撞，获国家文化传播工程重点推荐',
    views: 3200,
    awards: 5
  }
]
</script>

<style scoped>
.cases-container {
  padding: 40px 0;
}

.case-item {
  display: flex;
  height: 100%;
}

.case-image {
  width: 60%;
  height: 100%;
}

.case-info {
  width: 40%;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}

.case-info h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.case-type {
  color: var(--el-color-primary);
  margin-bottom: 20px;
}

.case-desc {
  line-height: 1.6;
  margin-bottom: 30px;
}

.case-stats {
  display: flex;
  gap: 20px;
}

.case-stats span {
  display: flex;
  align-items: center;
}

.case-stats .el-icon {
  margin-right: 5px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .case-item {
    flex-direction: column;
  }

  .case-image,
  .case-info {
    width: 100%;
  }

  .case-info {
    padding: 15px;
  }
}
</style>